<!--
 * @Description: 添加/编辑视点组
 * @Autor: 韩怡婷
 * @Date: 2021-12-28 10:07:45
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-05 11:24:28
-->
<template>
  <ag-popup
    :title="this.viewPointGroupPopup == 'add' ? '添加新的分组' : '重命名分组'"
    v-model="visible"
    @onConfirm="onConfirm"
    @onCancel="onCancel"
    :confirmVal="'确认'"
    :cancelVal="'取消'"
    :confirm="true"
    :cancel="true"
    :mask="false"
    class="group-popup"
  >
    <el-form label-width="140px">
      <el-form-item
        :label="viewPointGroupPopup == 'add' ? '新添加分组名称' : '重命名分组'"
      >
        <el-input
          size="small"
          v-model="groupName"
          placeholder="请输入新分组名称"
        />
      </el-form-item>
    </el-form>
  </ag-popup>
</template>
<script>
import AgPopup from "@/views/components/precut/AgPopup.vue";
import dirImageDataApi from "@/views/js/api/dirImageDataApi.js";
export default {
  name: "addOrEditViewPointGroup",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    viewPointGroupPopup: {
      type: String,
      default: "",
    },
    nowGroupId: {
      type: String,
      default: undefined,
    },
    nowGroupName: {
      type: String,
      default: undefined,
    },
    parentId: {
      type: String,
      default: "",
    },
  },
  components: {
    "ag-popup": AgPopup,
  },
  watch: {
    nowGroupName(nv) {
      this.groupName = nv;
    },
  },
  data() {
    return {
      groupName: this.nowGroupName,
    };
  },
  methods: {
    onConfirm() {
      if (this.viewPointGroupPopup == "add") {
        this.addGroup();
      } else if (this.viewPointGroupPopup == "edit") {
        this.renameGroup();
      }
    },
    /**
     * @lastUpdateBy : 韩怡婷
     * @description: 新增视点组
     */
    addGroup() {
      //判断视点组名称是否为null，undefined，只有空格
      if (!this.groupName || this.groupName.replace(/ /g, "") == "") {
        this.$message({
          message: "视点组名称不能为空!",
          type: "warning",
        });
        return;
      }
      this.$emit("close");
      this.$emit("addGroup", this.groupName);
      this.groupName = "";
    },
    /**
     * @lastUpdateBy : 韩怡婷
     * @description: 重命名视点组
     */
    renameGroup() {
      let _this = this;
      //判断视点组名称是否为null，undefined，只有空格
      if (!this.groupName || this.groupName.replace(/ /g, "") == "") {
        this.$message({
          message: "视点组名称不能为空!",
          type: "warning",
        });
        return;
      }
      let params = {
        imageStoreDirId: this.nowGroupId,
        imageStoreDirName: this.groupName,
        imageStoreDirParentId: this.parentId,
      };
      dirImageDataApi.updateDirImage(params).then((res) => {
        if (res.success) {
          _this.$message({
            message: "修改分组成功!",
            type: "success",
          });
          _this.$emit("getGroupList");
        }
      });
      this.$emit("close");
    },
    onCancel() {
      if (this.viewPointGroupPopup == "add") {
        this.groupName = "";
      } else {
        this.groupName = this.nowGroupName;
      }
      this.$emit("close");
    },
  },
};
</script>
<style scoped>
.group-popup {
  position: fixed;
  top: 13%;
  left: 50%;
  width: 440px;
}
.group-popup ::v-deep .el-form {
  padding: 20px 20px 0;
}
.group-popup ::v-deep .el-form-item__label {
  color: #fff;
}
.group-popup ::v-deep .el-form-item {
  margin-bottom: 0;
}
</style>
